<html>

<head>
    <title>TEST</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" href="./css/test.css" />
    <link rel="stylesheet" href="./css/question.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="./js/csrf.js"></script>
</head>

<body>

    <div class="container">
        <span class="icon">SHAKESPEARE</span>
        <ul class="nav-link-group">
            <li>
                <a href="find.html">PROJECT
                    <br>学习项目</a>
            </li>
            <li>
                <a href="guide.html">GUIDE
                    <br>医院导览</a>
            </li>
            <li>
                <a href="mytest.html">TEST
                    <br>在线测试</a>
            </li>
            <li>
                <a href="#">CONTACT
                    <br>联系我们</a>
            </li>
        </ul>
        <div class="login-block" id="login-block">
            <a href="./login.html?redirect=mytest.html" v-if="user_id === null || user_id === '' || user_id === undefined">登录</a>
            <a href="./register.html" v-if="user_id === null || user_id === '' || user_id === undefined">
                注册</a>
            <div v-else>欢迎，{{email}}
                <a href="#" v-on:click="logout">登出</a>
            </div>
        </div>
    </div>


    <div id="test">
        <div v-for="test in tests">
            <div class="subject-title">
                <img src="./img/question.png" width="23" height="23">&nbsp;&nbsp;{{test.problem.type}}&nbsp;&nbsp;{{test.score}}分
            </div>
            <div class="subject-main">

                <div class="container-fluid bg-info">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3>
                                    <span class="label label-warning" id="qid">{{test.problem.id}}</span>{{test.problem.description}}</h3>
                            </div>
                            <div class="modal-body">
                                <div class="quiz" id="quiz" data-toggle="buttons">
                                    <label class="element-animation1 btn btn-lg btn-primary btn-block" v-for="choice in test.problem.choice" v-on:click="setAnswer(test.problem.id, choice.choiceItem)">
                                        <span class="btn-label">
                                            <i class="glyphicon glyphicon-chevron-right"></i>
                                        </span>
                                        <input type="radio" name="q_answer">{{choice.choiceItem}}&nbsp;&nbsp;{{choice.description}}
                                    </label>
                                </div>
                            </div>
                            <div class="modal-footer" v-bind:id="'answer-'+test.problem.id">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;">
            <button class="btn btn-primary" style="font-size: 20px;" v-on:click="sendAnswer">提交答卷</button>
        </div>
    </div>
    <div class="tail">
        <div class="tail_left">
            <div class="tail_left_l">
                <div class="circle_1"></div>
                <div class="text_1">
                    <p>SHAKESPEAR</p>
                </div>
            </div>

            <div class="tail_left_r">
                <div class="text_2">
                    <p>StraBe 12
                        <br>12345 Irgendwo,Deutschland
                        <br>
                        <br>hallo@website.de</p>
                </div>
            </div>
        </div>

        <div class="tail_right">
            <div class="photo1">
                <img src="./img/tail1.png" />
            </div>
            <div class="photo2">
                <img src="./img/tail2.png" />
            </div>
            <div class="photo3">
                <img src="./img/tail3.png" />
            </div>

            <div class="text_3">
                <p>@2016 Shasta.Slle Rechte vorbehalten</p>

            </div>
        </div>
        <script src="./js/loginblock.js"></script>
        <script src="./js/test.js"></script>

</body>

</html>